<template>
  <div>
    <a-card :bordered='false'>
      <!--  #####################查询条件###################  -->
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <!--<a-col :md="8" :sm="24">
              <a-form-item label="分类名称">
                <a-input v-model="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>-->

            <a-col :md='8' :sm='24'>
              <a-form-item label='代金券名称'>
                <a-input v-model='queryParam.productName' placeholder='' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='代金券批次号'>
                <a-input v-model='queryParam.productNo' placeholder='' />
              </a-form-item>
            </a-col>

            <a-col :md='8' :sm='24'>
              <a-form-item label='小程序'>
                <a-select showSearch optionFilterProp='children' v-model='queryParam.customerCode'
                          :filterOption='filterOption'>
                  <a-select-option v-for='item in editProps' :key='item.code'>{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='所属门店'>
                <a-select showSearch optionFilterProp='children' v-model='storeCode' :filterOption='filterOption'
                          allowClear>
                  <a-select-option v-for='item in customers' :key='item.code'>{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='!advanced && 8 || 24' :sm='24'>
              <span class='table-page-search-submitButtons'
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button v-action:query type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
                <a-button style='margin-left: 8px' @click='clearData()'>重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################操作###################  -->
      <div class='table-operator'>
        <a-button v-action:add type='primary' icon='plus' @click='handleAdd()'>新建</a-button>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref='table' :columns='columns' :data='loadData'>
      <span slot='fileUrl' slot-scope='text, record'>
        <img :src='text' alt='' style='max-width: 150px'>
      </span>
        <span slot='productName' slot-scope='text, record'>
          <a @click='handleOrder(record)'>{{ text }}</a>
        </span>
        <a-tag slot='status' slot-scope='text' :color='text | statusColorFilter'>
          {{ text | statusFilter }}
        </a-tag>
        <a-tag slot='type' slot-scope='text, record' :color='text | typeColorFilter'>
          {{ text | typeFilter }}
        </a-tag>
        <span slot='status' slot-scope='status,record'>
          <a-switch checked-children='启用' un-checked-children='禁用' :checked='status' @change='statusBtn(record.id)'
                    :loading='loading' />
        </span>
        <span slot='action' slot-scope='text, record'>
        <template>
          <a v-action:edit @click='handleEdit(record)'>编辑</a>
          <a-divider v-action:edit type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>
              更多<a-icon type='down' />
            </a>
            <a-menu slot='overlay'>
              <a-menu-item v-action:query>
                <a v-action:edit @click='handlePic(record)'>明细图配置</a>
              </a-menu-item>
              <a-menu-item v-action:query>
                <a v-action:delete @click='handleDel(record)'>删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
      <edit ref='createModal' :customers='customers' @ok='refresh' />
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import edit from './voucherCouponEdit'
import { optionselect } from '@/api/mini/pic'
import { selectPage, storeList, del, statusBtn } from '@/api/product/voucherCoupon'

/**
 * 组件
 */
const components = { STable, edit }

const columns = [
  {
    title: '图片',
    dataIndex: 'fileUrl',
    scopedSlots: { customRender: 'fileUrl' },
    width: 150
  },
  {
    title: '代金券批次号',
    dataIndex: 'productNo',
    width: 160,
    ellipsis: true
  },
  {
    title: '代金券名称',
    dataIndex: 'productName',
    scopedSlots: { customRender: 'productName' },
    width: 280,
    ellipsis: true
  },
  {
    title: '开始时间',
    dataIndex: 'availableBeginTime',
    ellipsis: true
  },
  {
    title: '结束时间',
    dataIndex: 'availableEndTime',
    ellipsis: true
  },
  {
    title: '发放总量',
    dataIndex: 'maxCoupons',
    width: 70
  },
  {
    title: '已发数量',
    dataIndex: 'distributedCoupons',
    width: 70
  },
  {
    title: '限领张数',
    dataIndex: 'maxCouponsPerUser',
    width: 70
  },
  {
    title: '排序',
    dataIndex: 'sortNo',
    width: 60
  },
  {
    title: '上架状态',
    dataIndex: 'status',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: {
      customRender: 'action'
    }
  }
]

const typeMap = {
  1: {
    status: '',
    text: '免费代金券'
  },
  2: {
    status: '#87d068',
    text: '收费代金券'
  },
  3: {
    status: '#2db7f5',
    text: '积分代金券'
  },
  4: {
    status: '#F577C2',
    text: '谢谢惠顾券'
  },
  5: {
    status: '#2728f5',
    text: '预约商品'
  }
}
const statusMap = {
  0: {
    status: '#f50',
    text: '下架'
  },
  1: {
    status: '#108ee9',
    text: '上架'
  }
}

/**
 * 数据
 */
const data = function() {
  return {
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {},
    columns,
    loading: false,
    editProps: [],
    customers: [],
    storeCode: null,

    // 加载数据方法 必须为 Promise 对象
    loadData: parameter => {
      //this.queryParam.stockType = 'merNORMAL'
      this.queryParam.types = 2
      // return  false;
      return selectPage(Object.assign(parameter, this.queryParam, { storeCode: this.storeCode })).then(res => {
        return res.data
      })
    }
  }
}

const created = function() {
  optionselect().then(res => {
    if (res.code === 200) {
      this.editProps = res.data
    }
  })
  storeList().then(res => {
    if (res.code === 200) {
      this.customers = res.data
    }
  })
}

/**
 * 过滤器
 */
const filters = {
  statusFilter(status) {
    return statusMap[status].text
  },
  statusColorFilter(status) {
    return statusMap[status].status
  },
  typeFilter(type) {
    return typeMap[type].text
  },
  typeColorFilter(type) {
    return typeMap[type].status
  }
}

/**
 * 计算属性
 */
const computed = {}

/**
 * 侦听器
 */
const watch = {}

export default {
  name: 'merCouponList',
  data: data,
  components: components,
  created: created,
  filters: filters,
  computed: computed,
  watch: watch,
  /**
   * 方法
   */
  methods: {
    handleAdd() {
      this.$refs.createModal.add()
    },
    refresh() {
      this.$refs.table.refresh()
    },
    //联动选择商户
    handleProvinceChange(value) {
      this.storeCode = ''
      const params = { 'merchantCode': value }
      optionselect(params).then(res => {
        if (res.code === 200) {
          this.editProps = res.data
        }
      })
    },
    handleEdit(record) {
      this.$refs.createModal.edit(record)
    },
    handleOrder(record) {
      this.$router.push({ path: '/trade/usage', query: {productId: record.id} })
    },
    handlePic(record) {
      this.$router.push({ path: '/product/productDetail', query: { masterId: record.id } })
    },
    updateStatus(id) {
      updateStatus(id).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功！')
          //刷新页面
          this.$refs.table.refresh()
        }
      })
    },
    handleDel(record) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${record.productName} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用删除接口
          del(record.id).then(res => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
            if (res.code === 500) {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    statusBtn(id) {
      const that = this
      that.loading = true
      statusBtn(id).then(res => {
        that.loading = false
        if (res.code === 200) {
          that.$refs.table.refresh()
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    clearData() {
      this.queryParam = {}
      this.storeCode = null
    }
  }
}
</script>

<style scoped>

</style>
